<template>  
  <ColorPicker is-widget use-type="both" v-model="myColor" v-model:gradientColor="gradientColor"></ColorPicker>
  <q-btn @click="getColor" label="获取">      
  </q-btn>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, computed } from  'vue';
import { ColorPicker } from "vue3-colorpicker";
import { colors } from 'quasar';
import { isObjectEmpty } from 'src/util/utils';
import "vue3-colorpicker/style.css";
import { useMessageNotify } from 'src/hook/common/useMessageNotify';

export default defineComponent({
  name: 'ColorInput',
  components:{
    ColorPicker 
  },
  props: {
    color: {
      type: String,
      default: () => {
        return '#0ffcc0'
      }
    },
    gradientColor: {
      type: String,
      default: () => {
        return 'linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)'
      }
    }
  },
  emits: ['update:color'],
  setup (props, context) {
    //解构
    const {
      color,
      gradientColor
    } = toRefs(props);

    const {
      getPaletteColor,
      textToRgb,
      rgbToHex
    } = colors;

    const {
      showMessage
    } = useMessageNotify();

    let myColor = ref()

    const getColor = () => {
      showMessage(myColor.value)
    }

    // 响应对象
    // let myColor = computed({
    //   get: () => {        
    //     if (!isObjectEmpty(color.value)) {
    //       if (color.value.startsWith('#')) {
    //         return color.value;
    //       } else if (color.value.startsWith('rgb')) {
    //         let c = textToRgb(color.value);
    //         return rgbToHex(c);
    //       } else {
    //         return getPaletteColor(color.value);
    //       }
    //     } else {
    //       return '#4badc6';
    //     }
    //   },
    //   set: (c: string) => {
    //     debugger
    //     context.emit('update:color', c);
    //   }
    // });


    return{
      myColor,
      gradientColor,
      getColor
    }
  }
})
</script>

<style lang="scss" scoped>

</style>